<template>
	<view class="page_wrap">
		<custom-header title="重点关注"  :back="false" sticky />
		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="time-selector" @click="showTimePicker">
				<text class="time-text">{{ selectedDate }}</text>
				<text class="time-arrow">▼</text>
			</view>
			<view class="search-box">
				<image class="search-icon" src="/static/home/cxtb.png" mode="aspectFit" />
				<input type="text" v-model="searchKeyword" placeholder="供应商名称/商品名称" placeholder-class="placeholder" />
			</view>
		</view>

		<!-- Tab切换 -->
		<view class="tab-bar">
			<view 
				class="tab-item" 
				:class="{ active: activeTabIndex == index }" 
				@click="switchTab(index)"
				v-for="(item,index) in tabList"
				:key="index">
					<image v-if="activeTabIndex == index" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
					<text class="tab-text">{{ item }}</text>
			</view>
		</view>

		<!-- 列表数据 -->
		<view class="_wrap">
			<view
				class="no_data" 
				v-if="!listData.length && listLoading != 'loading'">
					<view class="text">暂无数据</view>
			</view>
			<!-- 表格区域 -->
			<view class="table-section" v-else-if="listData.length">
				<!-- 表头 -->
				<view class="table-header">
					<text class="header-cell flower-col">花材</text>
					<text class="header-cell reviewer-col">货架号</text>
					<text class="header-cell supplier-col">数量</text>
					<text class="header-cell status-col">质检结果</text>
				</view>
			
				<!-- 数据行 -->
				<view class="table-body">
					<view class="table-row" v-for="(item, index) in listData" :key="index">
						<view class="table-cell flower-cell">
							<text class="flower-name">{{ item.flowerName }}</text>
							<text class="grade">{{ item.grade }}</text>
						</view>
						<text class="table-cell reviewer-cell">{{ item.shelfNumber }}</text>
						<view class="table-cell supplier-cell">
							{{ item.quantity }}
						</view>
						<view class="table-cell status-cell" @click="handleOperation(item)">
							<view class="pending" v-if="item.status == '1'">
								未质检 <up-icon name="arrow-right" size="22rpx"></up-icon>
							</view>
							<view class="approved" v-if="item.status == '2'">
								合格 <up-icon name="arrow-right" size="22rpx" color="#30C8AE"></up-icon>
							</view>
							<view class="rejected" v-if="item.status == '3'">
								不合格 <up-icon name="arrow-right" size="22rpx" color="#F5564D"></up-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loading_wrap" v-if="listLoading == 'loading'">
				<up-loadmore 
					:status="listLoading" 
					iconSize="22"
					iconColor="#F5564D"  
					loadingIcon='semicircle'
					loadingText="" />
			</view>
		</view>

		<!-- 时间选择器组件 -->
		<custom-select-time :show="showTimeSelector" :defaultDate="selectedDate" @confirm="handleTimeConfirm"
			@close="showTimeSelector = false" />
		<!-- 弹出层提示 -->
		<custom-toast :show="isShowToast" :config="toastConfig" @cancel="hideToast" @confirm="confirmToast" />
		<!-- 质检操作 -->
		<up-popup :show="isShowOperation" @close="isShowOperation = false" closeable mode="center" :round="10">
			<view class="operation_popup">
				<view class="title">请进行自检操作</view>
				<view class="btn_wrap" @click="isShowOperation = false">
					<view class="icon">
						<image src="/static/home/zj01.png" mode=""></image>
					</view>
					<view class="text">质检合格</view>
				</view>
				<view class="btn_wrap" @click="isShowOperation = false">
					<view class="icon">
						<image src="/static/home/zj02.png" mode=""></image>
					</view>
					<view class="text">质检不合格</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	import {
		getCurrentDate,
		objectToQueryString
	} from '@/utils/util.js'
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const {
		isShowToast,
		toastConfig,
		showToast,
		hideToast
	} = useToast()
	// 弹出层确认
	const confirmToast = (data) => {
		console.log(data)
		hideToast()
	}
	
	const searchKeyword = ref('')
	
	// 选择时间
	const showTimeSelector = ref(false)
	const selectedDate = ref('')
	const showTimePicker = () => {
		showTimeSelector.value = true
	}	
	const handleTimeConfirm = (date) => {
		selectedDate.value = date
		loadGetListData()
	}

	// 当前激活的Tab
	const activeTabIndex = ref(0)
	// Tab列表
	const tabList = ['新顾客', '新花农', '30天断供', '7天售后', '7天质检']
	// 切换Tab
	const switchTab = (index) => {
		activeTabIndex.value = index
		loadGetListData()
	}

	// 列表数据
	const listData = ref([])
	const listLoading = ref('loadmore')
	const loadGetListData = () => {
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(() => {
			listLoading.value = 'loadmore'
			listData.value = [{
					flowerName: '蜜桃雪山(香槟)',
					grade: 'A级',
					shelfNumber: '#01-050',
					quantity: 8,
					status: '1'
				},
				{
					flowerName: '粉红雪山',
					grade: 'B级',
					shelfNumber: '#01-027',
					quantity: 1,
					status: '2'
				},
				{
					flowerName: '白雪山',
					grade: 'D级',
					shelfNumber: '#01-285',
					quantity: 5,
					status: '3'
				},
				{
					flowerName: '艾莎',
					grade: 'E级',
					shelfNumber: '#01-283',
					quantity: 5,
					status: '1'
				},
				{
					flowerName: '粉红雪山',
					grade: 'B级',
					shelfNumber: '#01-027',
					quantity: 1,
					status: '2'
				},
				{
					flowerName: '白雪山',
					grade: 'D级',
					shelfNumber: '#01-285',
					quantity: 5,
					status: '3'
				},
				{
					flowerName: '艾莎',
					grade: 'E级',
					shelfNumber: '#01-283',
					quantity: 5,
					status: '1'
				},
				{
					flowerName: '粉红雪山',
					grade: 'B级',
					shelfNumber: '#01-027',
					quantity: 1,
					status: '2'
				},
			]
		}, 1000)
	}
	
	// 处理操作
	const isShowOperation = ref(false)
	const row = ref(null)
	const handleOperation = (item)=>{
		row.value = item
		isShowOperation.value = true
	}

	onMounted(() => {
		selectedDate.value = getCurrentDate()
		loadGetListData()
	})
</script>

<style lang="scss">
	.page_wrap {
		min-height: 100vh;
		background-color: #fff;

		.search-section {
			background: #FFFFFF;
			padding: 20rpx 30rpx;
			display: flex;
			gap: 20rpx;

			.time-selector {
				display: flex;
				align-items: center;
				gap: 8rpx;
				flex-shrink: 0;
				margin-left: 20rpx;
				cursor: pointer;

				.time-text {
					font-size: 24rpx;
					color: #555;
				}

				.time-arrow {
					font-size: 20rpx;
					color: #555;
				}
			}

			.search-box {
				flex: 1;
				height: 64rpx;
				background: #F7F7F7;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;

				.search-icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 12rpx;
					display: block;
					transform: translateY(-1rpx);
				}

				input {
					flex: 1;
					font-size: 24rpx;
					color: #333333;
				}

				.placeholder {
					color: #999999;
				}
			}
		}

		// Tab栏
		.tab-bar {
			background: #ffffff;
			display: flex;
			.tab-item {
				flex: 1;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
		
				.tab-icon {
					width: 27.5rpx;
					height: 25rpx;
					transform: translateX(10rpx) translateY(-16rpx);
				}
		
				.tab-text {
					font-size: 28rpx;
					color: #999;
				}
		
				.tab-indicator {
					position: absolute;
					bottom: 0;
					width: 60rpx;
					height: 4rpx;
					background: #f5564d;
					border-radius: 2rpx;
				}
		
				&.active .tab-text {
					color: #333;
					font-weight: 600;
				}
			}
		}
		._wrap{
			padding: 0 24rpx;
		}
		// 表格区域
		.table-section {
			.table-header {
				padding: 0 24rpx;
				display: flex;
				background: #FFF4E6;
				height: 67rpx;
				align-items: center;
				border-radius: 12rpx;
		
				.header-cell {
					font-size: 24rpx;
					color: #EC6F15;
		
					&.flower-col {
						flex: 2.5;
					}
		
					&.reviewer-col {
						flex: 1.2;
					}
		
					&.supplier-col {
						flex: 1;
						text-align: center;
					}
		
					&.status-col {
						flex: 0.8;
					}
				}
			}
		
			.table-body {
				border: 1px solid #F2F2F2;
				border-radius: 12rpx;
				padding: 0 24rpx;
				margin-top: 12rpx;
				.table-row {
					display: flex;
					align-items: center;
					// height: 100rpx;
					padding: 28rpx 0;
					border-bottom: 1rpx solid #F2F2F2;
					// cursor: pointer;
					position: relative;
		
					&:last-child {
						border-bottom: none;
					}
					// &:active {
					// 	background-color: #f1f1f1;
					// }
		
					.table-cell {
						font-size: 24rpx;
						color: #666666;
						// padding: 20rpx 12rpx;
						// height: 100%;
						display: flex;
						align-items: center;
						&.flower-cell {
							flex: 2.5;
							justify-content: flex-start;
							gap: 8rpx;
							white-space: nowrap;
							overflow: hidden;
		
							.flower-name {
								color: #666666;
								//  flex: 1;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								min-width: 0;
							}
		
							.grade{
								color: #F5564D;
								font-size: 24rpx;
								flex-shrink: 0;
								min-width: 50rpx;
							}
						}
		
						&.reviewer-cell {
							flex: 1.2;
						}
		
						&.supplier-cell {
							flex: 1;
							text-align: center;
							justify-content: center;
						}
		
						&.status-cell {
							flex: 0.8;
		
							.pending {
								// color: #FFA44A;
								display: flex;
							}
		
							.approved {
								color: #30C8AE;
								display: flex;
							}
		
							.rejected {
								color: #F5564D;
								display: flex;
							}
						}
					}
				}
			}
			.no_data{
				padding-top: 100rpx;
				text-align: center;
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	.operation_popup{
		padding: 40rpx;
		.title{
			font-size: 32rpx;
			color: #666;
			text-align: center;
		}
		.btn_wrap{
			width:520rpx;
			height: 148rpx;
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			margin-top: 36rpx;
			border-radius: 16rpx;
			.icon{
				width: 148rpx;
				height:124rpx;
				display: flex;
				transform: translateY(20rpx);
			}
			.text{
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				padding-left: 24rpx;
			}
		}
	}
</style>